
import React, { useEffect, useState } from 'react'
import Swiper2 from './components/swiper';
import PriceItem from './components/price'
import MyHeaderli from './components/footer'
import { connect } from 'react-redux';
import axios from 'axios';

import { addCartAction } from '../../store/actions/cart'

import { useNavigate, useParams } from 'react-router-dom';

const Title = (props) => {

    const { addCartAction } = props
    const { token } = props.user

    const [swiperimg, setSwiperimg] = useState([])
    const [itemobj, setItemobj] = useState({})
    const params = useParams()

    const { id } = params
    const navigate = useNavigate()

    const addCartFn = () => {
        if (token !== '') {
            const { disPrdId, name } = itemobj;
            const { photoPath, photoName } = itemobj.sbomList[0]
            const data = {
                id: disPrdId, name: name, num: 1, price: itemobj.sbomList[0].price || 0,
                pic: `https://hshop.honorfile.com/pimages/cnqx/${photoPath}800_800_${photoName}`,
                type: true
            }
            addCartAction(data)
            navigate('/cart')

        }
        else {
            navigate('/login');
        }


    }
    useEffect(() => {

        axios.get(`/mcp/queryPrdDisplayDetailInfo?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&item_id=${id}&sbomCode=8086110027003&productId=${id}`).then(res => {
            setSwiperimg(res.data.sbomList[0].groupPhotoList)
            setItemobj(res.data)

        })


    }, [id])


    return (
        <div>
            <Swiper2 swiperimg={swiperimg} />
            <PriceItem itemobj={itemobj} />
            <MyHeaderli addCartFn={addCartFn} />

        </div>)
}
export default React.memo(connect(
    state => ({
        cart: state.cart,
        user: state.user || []

    }
    ), { addCartAction }
)(Title))

